//获取dom元素
const tbody = document.querySelector('tbody');

//渲染页面 函数封装==========================================
// 函数名 : fn
const fn = async (e) => {
    tbody.innerHTML = ""
    // 声明 函数名 fuck 存储 axios的返回值
    const fuck = await axios({
        url: "/score/list",
        // headers: {
        //     Authorization: localStorage.getItem("token")
        // },
    });
    // console.log(fuck);
    //遍历返回值的 对象
    for (const key in fuck.data.data) {
        // console.log(key);
        //解构数组
        const { name, score } = fuck.data.data[key];
        tbody.innerHTML += `<tr>
        <th scope="row">${key}</th>
        <td>${name}</td>
        <td class="score" data-stu_id="${key}" data-batch="1">${score[0]}</td>
        <td class="score" data-stu_id="${key}" data-batch="2">${score[1]}</td>
        <td class="score" data-stu_id="${key}" data-batch="3">${score[2]}</td>
        <td class="score" data-stu_id="${key}" data-batch="4">${score[3]}</td>
        <td class="score" data-stu_id="${key}" data-batch="5">${score[4]}</td>
      </tr>`;
    };
};
fn();

//设置双击修改成绩事件==========================================
tbody.addEventListener("dblclick", (e) => {
    // console.log(e.target);
    //设置 target 变量，用来存储选中标签
    const target = e.target;
    //判断选中的是不是成绩
    if (target.classList.contains("score")) {
        const input = document.createElement("input");//新建 input 标签
        // 设置标签属性
        input.type = "text";
        input.value = target.innerText;
        input.display = "block"
        //将 标签 插入 选中框
        target.appendChild(input);
        // 标签获得焦点事件
        input.focus();

        //添加失去焦点事件-----------------------------------------
        input.addEventListener("blur", async () => {
            //解构选中标签的 自定义属性的值 和输入框内的值，用来请求吸纳响应
            // console.log("target.dataset", target.dataset);
            const { stu_id, batch } = target.dataset;
            const score = input.value;
            //请求响应 变量 shift 存储响应
            const shift = await axios({
                url: "/score/entry",
                method: "post",
                data: {
                    stu_id,
                    batch,
                    score
                }
            })
            // console.log(shift);
            if (shift.data.code === 0) {
                toastr.success(shift.data.message, "成功")
                fn();//刷新数据
                target.removeChild(input)
            }
        })
        //添加键盘点击事件-----------------------------------------
        input.addEventListener("keyup", (res) => {
            if (res.key === "Enter") {
                input.blur()
            }
        })
    };

});